<template>
  <div class="subject" v-if="data">
    <div class="center">
      <!-- 专题上部 -->
      <div class="subTop">
        <!-- 地图 -->
        <div ref="map" id="myChart" :style="{
          width: '50%',
          height: '100vh',
        }"></div>
        <!-- 右侧文字 -->
        <div class="content">
          <div class="title">
            <h1>中国·{{ data.data.prov_detail[0].prov }}</h1>
            <span> {{ data.data.prov_detail[0].lovend }}</span>
          </div>
          <div class="desc">
            <p>
              {{ data.data.prov_detail[0].detail }}
            </p>
            <br />
            <span><i class="el-icon-arrow-down"></i></span>
          </div>
        </div>
      </div>

      <!-- 搜索区 -->
      <div class="search" id="search">
        <div class="sear-top">
          <div class="sear-left">
            <el-autocomplete placeholder="您想吃点什么？" class="inline-input" v-model="autoInput"
              :fetch-suggestions="querySearch" @input="inputSearch(autoInput)" @change="getIuput(autoInput)"
              @select="getIuput(autoInput)"></el-autocomplete>
            <el-select placeholder="城市" class="select" v-model="cities.city">
              <el-option v-for="(c, i) in cities" :key="i" :value="c.city">
              </el-option>
            </el-select>
            <el-select placeholder="品类" class="select" v-model="kinds.kind" @change="getSearch()">
              <el-option v-for="(k, i) in kinds" :key="i" :value="k.kind">
              </el-option>
            </el-select>
            <el-select placeholder="口味" class="select" v-model="taste.taste" @change="getSearch()">
              <el-option v-for="(t, i) in taste" :key="i" :value="t.taste">
              </el-option>
            </el-select>
          </div>
          <div class="sear-right">
            <ul>
              <li><span>热门搜索:</span></li>
              <li><a href="">凉粉</a></li>
              <li><a href="">糕点</a></li>
              <li><a href="">面点</a></li>
              <li><a href="">酱油</a></li>
              <li><a href="">麻花</a></li>
            </ul>
          </div>
        </div>
        <div class="sear-bot">
          <template v-if="search">
            <sub-search v-for="(x, i) in search" :key="i" :item="x" />
          </template>
          <template v-else-if="searchData">
            <sub-search v-for="(x, i) in searchData" :key="i" :item="x" />
          </template>
          <template v-else>
            <div class="subject-item">
              <h3>
                <a href="">未收录</a>
              </h3>
              <a href=""> <img src="../../public/gdgz-shmf1.jpeg" alt="" /></a>
              <img class="prize" src="../../public/4.png" alt="" />
              <p>暂无此 类/区域 美食收录</p>
            </div>
          </template>
        </div>
      </div>

      <!-- 地区1 -->
      <div v-if="data.data.foods.length > 0">
        <div id="areaFa" ref="areaFa" v-for="(x, i) in areaCity" :key="i" class="area"
          :class="{ area2: (i + 1) % 2 == 0 }">
          <div class="area-text">
            <h2>
              <a @click="goArea(x.city)">{{ x.city }}</a>
            </h2>
            <hr />
            <div>
              <p>{{ x.lovend }}</p>
              <br />
              <p class="p2">
                {{ data.data.prov_detail[0].detail }}
              </p>
            </div>
          </div>
          <div class="area-list">
            <sub-card id="sub-card" v-for="(c, index) in areaCity[i].card.slice(0, 6)" :card="c" :key="index"
              :areaImage="areaImage" />
          </div>
        </div>
      </div>

      <!-- 地区2
      <div class="area">
        <div class="area-list">
          <sub-card />
        </div>
        <div class="area-text">
          <h2><a href="">永川区</a></h2>
          <hr />
          <p>火锅故里，无辣不欢</p>
          <p>
            重庆源自四川，与四川共享巴蜀文化。从真实的生活中诞生的各类小吃，更是文化交融下巴渝人用智慧的谱写的赞歌。
            <br />
            截止2021年6月30号，重.
          </p>
        </div>
      </div> -->

      <!-- 底部 -->
      <div class="sub-bot" id="sub-bot">
        <el-row :gutter="32" class="bot-row1">
          <el-col :span="8">
            <div class="row1-1">
              <img src="../../public/017a3e8bc6ad8f92414e.jpeg" alt="" />
              <div class="bot-loca">
                <a href="">
                  <span class="el-icon-location-outline"></span>
                  <p>{{ $route.query.prov }}</p>
                </a>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="row1-2">
              <el-carousel :interval="5000" trigger="click" height="350px">
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img style="width: 100%; height: 100%" src="../../public/e60b66ea966fb489bff4.jpeg" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="32" class="bot-row2">
          <el-col :span="6">
            <div class="adv">
              <img src="image/宠物医院.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="image/国家图书馆.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="image/驾考宝典.png" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="adv">
              <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
              <p>广告位</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 视频 -->
      <!-- <div class="mask" v-if="videoPlay == true"></div>
      <div class="video" v-if="videoPlay == true">
        <video
          style="width= 100%; height=100%; object-fit: fill"
          src="../../public/1660712539369371.mp4"
          autoplay
          controls
        ></video>
      </div> -->
      <div class="areaVideo">
        <el-dialog modal-append-to-body @update="updateVideo" :visible.sync="videoVisible" width="75%"
          @close="closeVideo">
          <div>
            <video object-fit="cover" width="100%" height="100%" ref="video" controls="controls" autoplay="autoplay"
              src="../../public/1660712539369371.mp4"></video>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import SubSearch from "@/components/SubSearch.vue";
import SubCard from "@/components/SubCard.vue";
import * as echarts from "echarts";
import "../assets/plugins/map.js";

export default {
  components: { SubSearch, SubCard },
  computed: {},
  data() {
    return {
      mapData: this.$route.query.prov,
      data: null,
      areaCity: [],
      kinds: [],
      cities: [],
      taste: [],
      search: null,
      autoInput: "",
      searchData: [],
      inputData: [],
      areaImage: [],
      videoVisible: false,
      timer: null,
      option: {},
    };
  },
  // 生命周期更新完成后加载map
  updated() {
    this.drawBar();
  },
  methods: {
    // 省级地图绘制
    drawBar() {
      this.myChart = echarts.init(document.getElementById("myChart"));
      this.myChart.setOption(this.option);
    },
    init() {
      this.option = {
        toolbox: {
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {
              readOnly: false,
            },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "feiyimeishi",
            type: "map",
            mapType: this.mapData,
            label: {
              normal: {
                show: false,
              },
            },
            // 鼠标焦点
            emphasis: {
              // 字体颜色
              label: {
                color: "#fff",
              },
              // 地区颜色
              itemStyle: {
                areaColor: "#6f1313",
                bmap: {
                  roam: true,
                  zoom: 2,
                },
              },
            },
            // 鼠标选中
            select: {
              // 地区颜色
              itemStyle: {
                areaColor: "#6f1313",
              },
              // 字体颜色
              label: {
                color: "#fff",
              },
            },
          },
        ],
      };
    },

    getProv() {
      let prov = this.$route.query.prov;
      //console.log(prov);
      this.axios.get("index/prov?prov=" + prov).then((res) => {
        //console.log(res);
        this.data = res.data;

        //分类获取相同城市名的美食卡
        let arr = res.data.data.foods;
        // console.log(arr);
        let obj = [];
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
          if (!obj[arr[i].city]) {
            newArr.push({
              city: arr[i].city,
              lovend: arr[i].lovend,
              card: [{ detail: arr[i].detail, name: arr[i].name }],
            });
            obj[arr[i].city] = arr[i];
          } else {
            for (let j = 0; j < newArr.length; j++) {
              if (arr[i].city == newArr[j].city) {
                newArr[j].card.push({
                  detail: arr[i].detail,
                  name: arr[i].name,
                });
                break;
              }
            }
          }
          this.areaCity = newArr;
          //console.log(this.areaCity);
        }
      });
    },

    getFood() {
      let prov = this.$route.query.prov;
      this.axios.get("index/search?prov=" + prov).then((res) => {
        // console.log(res);
        this.cities = res.data.data.cities;
        this.kinds = res.data.data.kinds;
        this.kinds.unshift({ kind: "所有" });
        this.taste = res.data.data.taste;
        this.taste.unshift({ taste: "所有" });
      });
    },

    getSearch() {
      let p1 = this.kinds.kind
      let p2 = this.taste.taste
      if (p1 == undefined || p1 == '所有') p1 = ''
      if (p2 == undefined || p2 == '所有') p2 = ''
      let url = `index/search_taste?kind=${p1}&taste=${p2}`
      this.axios.get(url).then(res => {
        console.log(res.data);
        if (res.data.code == 200) { this.search = null } else {
          this.search = res.data.data.slice(0, 6)
        }
      })
      // let p1 = this.kinds.kind;
      // let p2 = this.taste.taste;
      // if (p1 == undefined) p1 = "";
      // if (p2 == undefined) p2 = "";
      // let url = `index/search_taste?`;
      // if (p1 != "" && p1 != "所有" && p2 == "") {
      //   this.axios.get(`${url}kind=${p1}`).then((res) => {
      //     //console.log(res);
      //     this.search = res.data.data;
      //   });
      // } else if (p2 != "" && p2 != "所有" && p1 == "") {
      //   this.axios.get(`${url}taste=${p2}`).then((res) => {
      //     //console.log(res);
      //     this.search = res.data.data;
      //   });
      // } else if (p1 == "所有" || p2 == "所有") {
      //   this.axios.get(url).then((res) => {
      //     //console.log(res);
      //     this.search = res.data.data.slice(0, 9);
      //   });
      // } else {
      //   this.axios.get(`${url}taste=${p2}&kind=${p1}`).then((res) => {
      //     //console.log(res);
      //     this.search = res.data.data;
      //   });
      // }
    },

    getIuput(food = "") {
      this.axios.get(`index/searchFood?food=${food}`).then((res) => {
        if (res.data.code == 200) {
          this.searchData = "";
          this.search = "";
        } else {
          this.searchData = res.data.data.slice(0, 6);
          // console.log(this.searchData);
          this.inputData = res.data.data;
          //console.log(this.inputData);
          for (var key in res.data.data) {
            this.areaImage.push({
              image: res.data.data[key].image,
              name: res.data.data[key].name,
            });
          }
        }
      });
    },
    inputSearch(food) {
      this.kinds.kind = '所有'
      this.taste.taste = '所有'
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        //console.log(this.autoInput);
        this.axios.get(`index/searchFood?food=${food}`).then((res) => {
          this.searchData = res.data.data.slice(0, 6);
        });
      }, 2000);
    },
    querySearch(query, cb) {
      var inputData = this.inputData.map((v, i) => {
        return {
          value: v.name,
          index: i,
        };
      });
      //console.log(inputData);
      var results = query
        ? inputData.filter(this.createFilter(query))
        : inputData;

      cb(results);
    },
    createFilter(query) {
      return (inputData) => {
        return inputData.value.toUpperCase().match(query.toUpperCase());
      };
    },
    handleSelect(item) {
      //console.log(item);
    },
    goArea(e) {
      this.$router.push("/area?city=" + e);
    },
    updateVideo(q) {
      this.videoVisible = q;
    },
    closeVideo() {
      this.$refs.video.pause();
    },
  },

  mounted() {
    this.getProv();
    this.getFood();
    this.getIuput();
    this.init();
  },

  watch: {
    search() {
      if (this.search) {
        this.searchData = "";
        this.autoInput = "";
      }
    },
    searchData() {
      if (this.searchData.length !== 0 || this.autoInput !== '') {
        this.search = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.subject {
  background: url("../../public/bgshgd123.jpeg") center top;

  .center {
    margin: 0 auto;
    padding: 62px 64px;

    //上面部分
    .subTop {
      display: flex;
      justify-content: center;
      color: #fff;

      .content {
        width: 50%;
        margin-left: 50px;
        text-align: center;

        .title {
          margin-top: 20px;
          padding: 40px 0;
          position: relative;

          h1 {
            font-size: 60px;
            margin-bottom: 32px;
            font-family: serif;
            letter-spacing: 4px;
          }

          span {
            font-size: 20px;
          }
        }

        .title::before,
        .title::after {
          content: "";
          background-color: #fff;
          width: 70px;
          height: 5px;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translate(-50%);
        }
      }

      .title::after {
        top: 0;
      }

      .desc {
        padding: 96px;

        p {
          font-size: 20px;
          font-weight: 600;
          letter-spacing: 2px;
        }

        .el-icon-arrow-down {
          font-size: 48px;
          animation: upDown 1.5s linear infinite;
        }
      }
    }

    @keyframes upDown {
      0% {
        transform: translateY(30px);
      }

      50% {
        transform: translateY(10px);
      }

      100% {
        transform: translateY(30px);
      }
    }

    // 搜索
    .search {
      margin: 80px 0;
      background-color: #fff;

      .sear-top {
        padding: 24px 32px;
        margin: 20px 20px 0;
        font-size: 16px;
        display: flex;
        justify-content: space-evenly;
        border-bottom: 1px solid rgba(150, 134, 134, 0.4);

        .sear-left {
          //   input,select{
          //     padding:8px 5px;
          //     font-size: 16px;
          //     outline:none;
          //     border-radius: 0;
          //     border-color:rgb(150 134 134 / 40%);

          //   }
          //   select{
          //     width: 85px;
          //   }
          display: flex;
          width: 55%;
          font-size: 16px;

          .input,
          .inline-input {
            width: 200px;
            font-size: 16px;
          }

          .select {
            width: 100px;
            font-size: 16px;
          }
        }

        .sear-right {
          width: 45%;
          line-height: 40px;

          ul {
            display: flex;
            list-style: none;
            justify-content: space-between;

            a {
              text-decoration: none;
              color: #000;
            }
          }

          span {
            font-weight: 600;
          }
        }
      }

      .sear-bot {
        padding: 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .subject-item {
          margin: 0 20px 40px;
          width: 29.2%;
          text-align: center;
          position: relative;

          a {
            text-decoration: none;
          }

          img {
            width: 100%;
            margin: 20px 0;
            height: 250px;
          }

          .prize {
            width: 48px;
            height: 48px;
            position: absolute;
            right: 7%;
            top: 12%;
          }

          h3>a {
            font-size: 24px;
            letter-spacing: 0.5rem;
            color: #4b5563;
          }

          p {
            // 将对象作为弹性伸缩盒子模型显示
            display: -webkit-box;
            // 设置或检索伸缩盒对象的子元素的排列方式
            -webkit-box-orient: vertical;
            //  指定几行
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
        }
      }

      .sear-bot::after {
        content: "";
        flex: auto;
      }
    }

    //地区
    .area {
      margin: 100px 0;
      // background-color: #fff;
      display: flex;
      justify-content: center;
      min-height: 400px;

      .area-text {
        padding: 30px;
        text-align: center;
        width: 35%;
        backdrop-filter: blur(7px);
        background: rgba(255, 255, 255, 0.9);
        color: #4b5563;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;

        h2 {
          position: relative;

          >a {
            cursor: pointer;
            letter-spacing: 1rem;
            text-decoration: none;
            color: #4b5563;
            font-family: serif;
            font-size: 2.25rem;
            line-height: 2.5rem;
          }
        }

        h2::before {
          content: "「";
          font-size: 2.25rem;
          letter-spacing: 1rem;
          font-weight: normal;
          position: absolute;
          top: -0.6rem;
          left: -4rem;
        }

        h2::after {
          content: "」";
          font-size: 2.25rem;
          letter-spacing: 1rem;
          font-weight: normal;
          position: absolute;
          right: -4rem;
          bottom: -0.6rem;
        }

        hr {
          height: 5px;
          width: 35px;
          background-color: #dc2626;
          border: 0;
        }

        div {
          width: 100%;

          p {
            user-select: none;
            font-size: 16px;
            font-weight: 600;
          }

          .p2 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
        }
      }

      .area-list {
        background-color: rgb(240, 214, 214);
        width: 65%;
        display: flex;
        flex-wrap: wrap;
        padding: 50px;
      }

      .area-list::after {
        content: "";
        flex: auto;
      }
    }

    .area2 {
      flex-direction: row-reverse;
    }

    //底部
    .sub-bot {
      background-color: #fff;
      padding: 32px;

      .el-row {
        margin-bottom: 32px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .bot-row1 {
        .row1-1 {
          position: relative;
          text-align: center;
          height: 350px;
          overflow: hidden;

          >img {
            height: 450px;
            width: 100%;
          }

          .bot-loca {
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            left: 0;
            margin: auto;
            line-height: 120px;

            a {
              text-decoration: none;
              color: #000;

              span {
                font-size: 48px;
              }

              p {
                margin-top: -80%;
              }
            }
          }
        }
      }

      .bot-row2 {
        .adv {
          position: relative;

          >img {
            width: 100%;
            height: 233px;
          }

          p {
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.7);
            padding: 12px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
          }
        }
      }
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      background-color: #000000;
      opacity: 0.6;
    }

    .video {
      width: 740px;
      height: 480px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
    }
  }
}
</style>

<style lang="scss">
#search.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-select .el-input__inner:focus,
#search.el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #f87171;
}

.el-select-dropdown__item.selected {
  color: #f87171;
}

.el-carousel__indicator--horizontal .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-carousel__arrow {
  font-size: 20px;
}

.areaVideo {

  .el-dialog__body,
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__headerbtn {
    font-size: 30px;
    z-index: 2;
  }
}
</style>
